<template>
    <div class="button-group">
      <a-input-search
        v-model:value="search"
        :placeholder="placeholder"
        class="custom-search-input"
        size="large"
        @search="onSearch"
      />
      <a-button class="custom-button add-button" type="primary" @click="emit('add')">添加</a-button>
      <a-button class="custom-button fresh-button" type="primary" @click="emit('refresh')">刷新</a-button>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  // 定义组件属性
  const props = defineProps({
    placeholder: {
      type: String,
      default: 'input search text' // 默认placeholder
    }
  });
  
  // 定义组件事件
  const emit = defineEmits(['search', 'add', 'refresh']);
  
  const search = ref(''); // 搜索框绑定值
  
  // 搜索事件处理
  const onSearch = () => {
    emit('search', search.value); // 触发搜索事件并传递值
  };
  </script>
  
  <style scoped>
  .button-group {
    margin-left: 20px;
    display: flex;
    align-items: center;
  }
  .custom-search-input {
    width: 200px;
    margin-right: 10px;
  }
  .add-button {
    background-color: #1890ff;
    color: white;
    margin-right: 15px;
  }
  .fresh-button {
    background-color: #52c41a;
    color: white;
  }
  </style>